<template>
	<view class="content" :class="{'active':active}">

		<view class="tabbar-box-wrap">
			<view class="tabbar-box">
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar/es6/es6')">
					<view class="tabbar-icon lIcon-js"></view>
					<text class="explain">ES6</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
					<view class="tabbar-icon lIcon-study" style="font-size: 60rpx;"></view>
					<text class="explain">uni.request</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
					<view class="tabbar-icon lIcon-ts" ></view>
					<text class="explain">Typescript</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
					<view class="tabbar-icon lIcon-vue"  style="font-size: 80rpx;"></view>
					<text class="explain">Vue/Vuex</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar/flex/flex')">
					<view class="tabbar-icon lIcon-css3"  style="font-size: 80rpx;"></view>
					<text class="explain">Flex布局</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar/regexp/regexp')">
					<view class="tabbar-icon lIcon-regx"  style="font-size: 75rpx;"></view>
					<text class="explain">正则表达式</text>
				</view>
				<view class="tabbar-box-item" :style="{color: color}"  @click="goToPage('/pages/tabbar/canvas/canvas')">
					<view class="tabbar-icon lIcon-canvas"  style="font-size: 70rpx;"></view>
					<text class="explain">Canvas</text>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
export default {
	data() {
		return {
			active: false,
			colorText : '',
			color : ''
		};
	},
	onLoad() {
		this.color = this.randomColor()
	},
	onShow() {
		// setTimeout(() => {
		this.active = true;
		// }, 500);
	},
	onHide() {
		this.active = false;
		
	},
	methods: {
		goToPage(url) {
			if (!url) return;
			uni.navigateTo({
				url
			});
		},
		randomColor() {
			let str = '23456789abcd';
			let arr = '#'
			for( let i=0; i<6 ; i++) {
				let randomNum = parseInt(Math.random() * 11)
				arr += str.charAt(randomNum)
			}
			console.log(arr)
			return arr;
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* #ifdef H5 */
	height: calc(100vh - var(--window-bottom) - var(--window-top));
	/* #endif */
	/* #ifndef H5 */
	height: 100vh;
	/* #endif */
	transition: opacity 0.3s;
	background: #999;
	opacity: 0;
	&.active {
		opacity: 1;
	}
	.logo {
		position: relative;
		margin-top: -400upx;
		width: 200upx;
		height: 200upx;
		// z-index: -1;
		opacity: 0;
		transition: opacity 0.3s;
		&.active {
			opacity: 1;
		}
	}
}
.tabbar-box-wrap {
	position: absolute;
	width: 100%;
	padding: 50upx;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	.tabbar-box {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: stretch;
		width: 100%;
		background: #fff;
		border-radius: 20upx;
		padding: 15upx 0;
		box-sizing: border-box;
		z-index: 2;
		box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);


		&:after {
			content: '';
			position: absolute;
			bottom: -16upx;
			left: 0;
			right: 0;
			margin: auto;
			width: 50upx;
			height: 50upx;
			transform: rotate(45deg);
			background: #fff;
			z-index: 1;
			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
			border-radius: 2px;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #ffffff;
			border-radius: 20upx;
			z-index: 2;
		}
		.tabbar-box-item {
			// position: relative;
			width: 33.33%;
			z-index: 3;
			margin: 20upx 0;
			color: $uni-color-subtitle;
			text-align: center;
			font-size: $uni-font-size-base;
			.box-image {
				width: 100%;
				height: $uni-img-size-lg;
			}
			.tabbar-icon {
				font-size: 70rpx;
				width: auto;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			&.red {
				color: red;
			}
			&.blue {
				color: blue;
			}
			&.orange {
				color: orange;
			}
			
		}
	}
}
</style>
